@(board: Board, path: String, resType: String, status: String, resources: List[Resource], topViewResources: List[Resource], categoryList: List[Category], statTup:(Long, Long, Long, Long), page: Int, total: Int)(implicit request: RequestHeader)

@import utils.RequestHelper
@main(s"${app.Global.siteSetting.name} - 社区分享", "board", "") {

@views.html.board.nav(path, categoryList)
<style>
.board-owner-avatar {
    margin-right: 5px;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 500rem;
}
</style>

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      <div class="fly-panel" style="margin-bottom: 0;">

        <div class="fly-panel-title fly-filter">
          <a @if(status == "0"){class="layui-this"} href="/boards?status=0&path=@path">所有</a>
          <span class="fly-mid"></span>
          <a @if(status == "1"){class="layui-this"} href="/boards?status=1&path=@path">未结</a>
          <span class="fly-mid"></span>
          <a @if(status == "2"){class="layui-this"} href="/boards?status=2&path=@path">已结</a>
          <span class="fly-mid"></span>
          <a @if(status == "3"){class="layui-this"} href="/boards?status=3&path=@path">精华</a>
        </div>

        <ul class="fly-list">
          @for(a <- resources){
          <li>
            <a href="/user/home?uid=@{a.author._id}" class="fly-avatar">
              <img src="@a.author.headImg" alt="">
            </a>
            <h2>
              <a class="layui-badge">@utils.AppUtil.prettyResource(a.resType)</a>
              <a href="/board/view?_id=@a._id">@a.title</a>
            </h2>
            <div class="fly-list-info">
              <a href="/user/home?uid=@{a.author._id}" link>
                <cite>@a.author.name</cite>
                <!--
                <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                <i class="layui-badge fly-badge-vip">VIP3</i>
                -->
              </a>
              <span>@utils.DateTimeUtil.toPrettyString(a.createTime)</span>
              <a href="/@{resType}s?status=@{status}&category=@{a.categoryPath}" link>@a.categoryName</a>

              <!--<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>-->
              @if(a.closed){
              <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
              }
              <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="回答"></i> @a.replyStat.replies.size
                <i class="iconfont icon-zan" title="点赞"></i> @a.voteStat.count
              </span>
            </div>
            <div class="fly-list-badge">
              @if(a.top){
              <span class="layui-badge layui-bg-black">置顶</span>
              }
              @if(a.recommended){
              <span class="layui-badge layui-bg-red">精帖</span>
              }
            </div>
          </li>
          }
        </ul>

        <!-- <div class="fly-none">没有相关数据</div> -->

        <div style="text-align: center">
          <div class="laypage-main">
            <a href="/boards?path=@{path}&resType=@{resType}status=@{status}&page=@{page-1}" class="laypage-prev">上一页</a><span>@{if(resources.isEmpty && total == 0){0}else{page}}/@{math.ceil(total/15.0).toInt}</span><a href="/boards?path=@{path}&resType=@{resType}status=@{status}&page=@{page+1}" class="laypage-next">下一页</a>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-body" style="text-align: center;">
          <div class="layadmin-homepage-pad-ver">
            <img class="layadmin-homepage-pad-img" src="@board.avatarUrl" width="100" height="100">
          </div>
          <h4 class="layadmin-homepage-font"><a href="" style="color:#009688;">@board.name</a></h4>
          <div class="layui-fluid" style="padding-top:10px;">
            <div class="layui-row" style="font-size:16px!important; color: #999!important;">
              <div class="layui-col-md3">
                <i class="layui-icon layui-icon-username" style="margin: 0 5px 0; font-size:20px!important;" title="今日访问次数"></i> @statTup._1
              </div>
              <div class="layui-col-md3">
                <i class="layui-icon layui-icon-user" style="margin: 0 5px 0; font-size:20px!important;" title="总计访问次数"></i> @statTup._2
              </div>
              <div class="layui-col-md3">
                <i class="layui-icon layui-icon-chat" style="margin: 0 5px 0; font-size:20px!important;" title="今日新帖数量"></i> @statTup._3
              </div>
              <div class="layui-col-md3">
                <i class="layui-icon layui-icon-dialogue" style="margin: 0 5px 0; font-size:20px!important;" title="总计帖子数量"></i> @statTup._4
              </div>
            </div>
          </div>
          <!--<p class="layadmin-homepage-min-font">@board.description</p>-->
          <div class="layui-btn-group" style="padding:30px 0 20px;">
            <button id="follow-btn" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe608;</i> <span id="follow-btn-text">立即关注</span></button>
          </div>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header">社区版主</div>
        <div class="layui-card-body" style="">
          @if(board.owner.nonEmpty){
            <a href="" style="color:#009688;vertical-align: middle!important;line-height:28px;">
                <img class="board-owner-avatar" src="@board.owner.get.headImg">
            </a>
            <a href="" style="color:#636b6f;vertical-align: middle!important;line-height:28px;font-size:14px;">@board.owner.get.name</a>
            <span class="layui-badge layui-bg-gray">码农</span>
          }else{
          暂无版主
          }
        </div>
      </div>

      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热门资源</dt>
        @for(a <- topViewResources){
        <dd>
          <a href="/@{a.resType}/view?_id=@{a._id}">@a.title</a>
          <span><i class="iconfont">&#xe60b;</i> @a.viewStat.count</span>
        </dd>
        }
      </dl>
    </div>
  </div>
</div>
}

<script>
var isFollowed = false;

$(function () {

@if(RequestHelper.isLogin){
  // 访问计数
  $.get('/board/recordTraffic?boardPath=@board.path');

  // 读取状态
  $.get('/board/getRelateStatus?boardPath=@board.path', function(data){
    isFollowed = data.isFollowed;
    renderFollowBtn();
  });
}

});

function renderFollowBtn(){
  if(isFollowed){
    $('#follow-btn-text').text("取消关注");
  } else {
    $('#follow-btn-text').text("立即关注");
  }
}

$('#follow-btn').click(function(){
 isFollowed = !isFollowed;
 renderFollowBtn();
 $.get('/board/followBoard?boardPath=@board.path&isFollow=' + isFollowed, function(data){
    if(data.code != 0){
      window.location.href.reload();
    }
  });
});
</script>
